<template>
    <div ref="basketballRef" class="basketball" @click="bounce"></div>
</template>

<script setup lang="ts">
const basketballRef = ref();
let topPosition = 0;
const changeTop = () => {
    topPosition = (topPosition - 2) % 12;
    basketballRef.value.style.backgroundPosition = topPosition + 'rem';
}

const bounce = () => {
    let time = 0;
    for (let i = 0; i < 6; i++) {
        time += 100;
        setTimeout(function () {
            changeTop();
        }, time)
    }
}

setInterval(bounce, 700);
</script>

<style scoped lang="scss">
.basketball {
  margin: 0 auto;
  width: 2rem;
  height: 2rem;
  background: url(@/assets/images/material/basketball-spritesheet.png) no-repeat 0 0;
  background-size: 12rem 2rem;
  cursor: url(@/assets/cursor/link.cur), default !important;
}
</style>